<template>
  <div class="mian">
    <mt-header fixed title="首页"></mt-header>
    <baidu-map
    ak="bfjh6ty1qqGNxSfCYUEeIquWm1z2D6LW"
    class="upperPart"
    :center="center"
    :zoom="zoom"
    @ready="handler"
    :scroll-wheel-zoom="true"
    :continuous-zoom="true"
    :pinch-to-zoom="true">
      <!-- <bm-overlay pane="labelPane" @draw="draw" @touchstart.native="overlayClick('腾讯大厦')">
        <div class="overlay-red"></div>
      </bm-overlay> -->

       <bm-marker v-for="item of buildList" :key="item.name"
       :position="{lng: item.lng, lat: item.lat}"
       :icon="{url:getIconType(item.type),size:{width: 16, height: 16}}"
       @click="overlayClick(item.name)">
    </bm-marker>
    </baidu-map>
    <div class="lowerPart" @click.native="toGiveAnalarm" @touchstart="toGiveAnalarm">
      <span></span>
      <span>告警数量：</span>
      <span>{{num}}</span>
    </div>

    <div class="overlay-red" ref="overlay"></div>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMarker, BmOverlay } from 'vue-baidu-map'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      zoom: 15,
      center: {lng: 113.9410499639, lat: 22.5461508801},
      ak: 'bfjh6ty1qqGNxSfCYUEeIquWm1z2D6LW',
      active: false,
      iconRed: require('../../../assets/image/build-red.svg'),
      iconGreen: require('../../../assets/image/build-green.svg'),
      fireControl: require('../../../assets/image/fire-control.svg'),
      toast: null,
      buildList: [],
      num: 0
    }
  },
  computed: {
    // center () {
    //   if (this.buildList.length === 0) {
    //     return {lng: 113.9410499639, lat: 22.5461508801}
    //   } else {
    //     return {lng: this.buildList[0].lng, lat: this.buildList[0].lat}
    //   }
    // }
  },
  created () {
    this.mydresouces()
    this.mysuperiors()
    this.mybuildinglist()
    this.getAlarmNum()
  },
  mounted () {
    this.$nextTick(() => {

    })
  },
  components: {
    BaiduMap,
    BmMarker,
    BmOverlay
  },
  methods: {
    getIconType (val) {
      if (val === 'build') {
        return this.iconGreen
      } else if (val === 'danger') {
        return this.iconRed
      } else if (val === 'fireControl') {
        return this.fireControl
      } else {
        return this.iconGreen
      }
    },
    handler ({ BMap, map }) {
      this.zoom = 12
    },
    overlayClick (val) {
      this.toast && this.toast.close()
      this.toast = Toast({
        position: 'middle',
        message: val,
        duration: 2000
      })
      this.$emit('changeToast', this.toast)
    },
    toGiveAnalarm () {
      this.$router.push('/giveAnalarm')
    },
    async getAlarmNum () {
      const param = {
        assetid: '',
        page: '1',
        pageSize: '0',
        startDate: '',
        endDate: '',
        ismeasurement: 'NO',
        islocation: 'NO',
        isalert: 'YES',
        history: 'NO'
      }
      const res = await this.$store.dispatch('assetevent', param)
      if (res.status === '0') {
        this.num = Number(res.context.numResults)
      }
    },
    async mydresouces () {
      const res = await this.$store.dispatch('mydresouces', {
        page: 1,
        pagesize: 0})
      if (res.status === '0') {
        res.context.forEach(item => {
          let sonItem = {
            type: 'danger',
            name: item.dresname,
            lat: item.latitude,
            lng: item.longitude
          }
          this.buildList.push(sonItem)
        })
      }
    },
    async mysuperiors () {
      const parm = {
        page: 1,
        pagesize: 0
      }
      const res = await this.$store.dispatch('mysuperiors', parm)
      if (res.status === '0') {
        res.context.supperlist.forEach(item => {
          let sonItem = {
            type: 'fireControl',
            name: item.name,
            lat: item.latitude,
            lng: item.longitude
          }
          this.buildList.push(sonItem)
        })
      }
    },
    async mybuildinglist () {
      const parm = {
        page: 1,
        pagesize: 0
      }
      const res = await this.$store.dispatch('mybuildinglist', parm)
      if (res.status === '0') {
        res.context.supperlist.forEach(item => {
          let sonItem = {
            type: 'build',
            name: item.buildingname,
            lat: item.latitude,
            lng: item.longitude
          }
          this.buildList.push(sonItem)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.mian {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	.upperPart {
		width: 100%;
		position: absolute;
		top: 38px;
		bottom: 40px;
		right: 0;
		left: 0;
  }
  .lowerPart{
		position: absolute;
		bottom: 0px;
		right: 0;
    left: 0;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    color: red;
    text-align: right;

  }
}
.overlay-green {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url('~@/assets/image/point.png') no-repeat center / cover;
}
.overlay-red {
	display: inline-block;
	width: 16px;
	height: 16px;
  background: url('~@/assets/image/build-green.svg') no-repeat center / cover;
}
.mian /deep/ .anchorBL {
  display: none;
}
</style>
